<template>
    <div class="login full_page">
        <div class="header">
            <img src="./tui_img.png" alt="">
        </div>
        <div class="content">
            <!--<cube-form>-->
            <cube-input placeholder="请输入手机号码" style="height: 50px" v-model="phone"></cube-input>
            <!--<cube-input v-model="password" type="password" :autocomplete="true" :eye="eye" placeholder="密码"></cube-input>-->
            <div class="ki">
                <cube-input style="margin-top: 20px;height: 50px" v-model="captcha" placeholder="请输入验证码">

                </cube-input>
                <span @click="sendCode" class="captcha">{{captchaSec>0?captchaSec+'s':"获取验证码"}}</span>
            </div>
            <!--<img @click="changeCaptcha" :src="captchaImg" alt="">-->
            <cube-button style="margin-top: 20px;" @click="confirm" :primary="true">登录</cube-button>
            <!--<cube-button @click="toRegister" :light="true">新用户注册</cube-button>-->
            <!--</cube-form>-->
        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import * as ToastUtil from '../../cubeui/toast'
    import {sendCode} from "../../api/login";
    export default {
        component: {},
        created() {
            let channelId = this.$route.query.channelId
            if(channelId){
                this.channelId = channelId
            }
        },
        data() {
            return {
                channelId:null,
                captchaSec:0,
                phone: null,
                captcha: null,
                eye: {open: true, reverse: true}
            }
        },
        methods: {
            sendCode(){
                if(this.captchaSec>0){
                    return
                }
                if(!this.phone||this.phone.length<11){
                    ToastUtil.showErrorToast('请输入正确的手机号')
                    return
                }
                this.captchaSec = 30
                //发送验证码 倒计时
                sendCode(this.phone)
                let time = setInterval(()=>{
                    this.captchaSec--
                    if(this.captchaSec==0){
                        clearInterval(time)
                    }
                },1000)
            },
            confirm() {
                if(!this.captcha){
                    ToastUtil.showErrorToast("请输入验证码!")
                    return
                }
                if(!this.phone){
                    ToastUtil.showErrorToast("请输入手机号码!")
                    return
                }
                let param = {
                    mobile: this.phone,
                    code: this.captcha,
                    channelId:this.channelId
                }
                ToastUtil.showLoadingToast()
                this.login(param).then(res => {
                    ToastUtil.showCorrectToast('操作成功')
                    this.$router.push({
                        path: '/home'
                    })
                }).catch(error => {
                    ToastUtil.hideToast()
                    ToastUtil.showErrorToast(error)
                })
            },
            ...mapActions(
                [
                    'login'
                ]
            )
        }
    }
</script>

<style type="text/stylus" lang="stylus" scoped>

    .header
        font-size 0

        img
            height 100%
            width 100%

    .content
        padding 0 5%
        height 100%
        background-color #5E7CEA
        .ki
            position relative
            .captcha
                text-align center
                height 100%
                width 100px
                line-height 50px
                font-weight 400
                font-size 14px
                display inline-block
                color #f02f2d
                background-color #F6F6F6
                position absolute
                right 0
                top 0

</style>
